<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>我的淘宝</title>
	<link rel="stylesheet" href="./css/personal.css">
	<link rel="stylesheet" href="layui/css/layui.css">
	<script src="js/jquery-3.7.1.min.js"></script>
	<script src="layui/layui.js"></script>
	<script src="js/personal.js"></script>
	<style>
		.layui-layer {
			z-index: 20000 !important; /* 根据需要设置一个较大的值 */
		}
		.layui-layer-shade{
			z-index: 1000 !important;
		}
	</style>
</head>
<body>
<div class="layui-tab layui-tab-brief">
	<ul class="layui-tab-title">
		<li id="layui-this1"><a href="worry.html" style="color: #fff">首页</a></li>
		<li id="layui-this2">账号设置</li>
	</ul>
	<div class="layui-tab-content">
		<div class="layui-tab-item layui-show">
			<div id="whole">
				<div id="sidebar">
					<ul>
						<li><a style="color: red; font-size: 20px;" href="#">全部功能</a></li>
						<li><a href="#">我的购物车</a></li>

						<li class="submenu"><a href="#">已买到的宝贝</a></li>

						<li><a href="#">购买过的店铺</a></li>
						<li><a href="#">我的卡劵包</a></li>
						<li><a href="#">我的发票</a></li>
						<li><a href="#">我的收藏</a></li>
						<li><a href="./myReview.html">评价管理</a></li>

						<li class="submenu"><a href="#">退款维权</a></li>

						<li><a href="#">我的足迹</a></li>
					</ul>
					<img src="image/foreground/下拉框.png" id="img1">
					<img src="image/foreground/下拉框.png" id="img2">
				</div>

				<div id="head">
					<div id="head1">
						<img src="image/foreground/2.webp">
						<a id="a"></a>
						<a id="a2">我的收货都在</a>
						<a id="a3">我的支付宝</a>
					</div>
					<div id="head2">
						<a class="b">待付款</a>
						<a class="b">待发货</a>
						<a class="b">待收货</a>
						<a class="b">待评价</a>
						<a>退货</a>
					</div>
					<img src="image/foreground/支付宝实名认证.png" id="img"/>
				</div>

				<div id="middle">
					<img src="image/foreground/小货车.png"/><a>我的物流</a>
				</div>

				<div id="tail">
					<div id="tail1">
						<span>根据浏览，猜我喜欢</span>
						<img src="image/foreground/循环.png"/>
						<input type="button" value="      换一组"/>
					</div>
					<div id="tail2">

					</div>
					<div id="wdtb"><img src="./image/foreground/logo.png" alt="" style="width: 120px"></div>
					<div id="ip1"><input type="text"/></div>
					<div id="ip2"><a href="welcome.html"><input type="button" value="搜索"></a></div>
				</div>
			</div>
		</div>
		<div class="layui-tab-item">
			<div id="a1">
				<div id="left">
					<ul>
						<li>账号管理</li>
						<li>安全设置</li>
						<li>个人资料</li>
						<li>个人信息成长</li>
						<li>支付宝绑定设置</li>
						<li>个人交易信息</li>
						<li>收货地址</li>
						<li>旺旺网页版设置</li>
						<li>应用授权</li>
					</ul>
				</div>
			</div>
			<div id="right">
				<!-- 内容一 -->
				<h3>个人资料</h3>
				<div class="layui-tab" lay-filter="test-hash">
					<ul class="layui-tab-title">
						<li class="layui-this" lay-id="11">基本资料</li>
						<li lay-id="22">头像图片</li>
					</ul>
					<div class="layui-tab-content">
						<div id="as2" class="layui-tab-item layui-show">亲爱的 t****3 ，填写真实的资料，有助于好友找到你哦。
							<br />
							<samp>当前头像</samp>
							<img id="as3" src="./image/foreground/e12 - 副本.png" alt="">
							<br />
							<samp>昵称</samp>
							<input type="text" style="margin-left: 80px;">
							<br />
							<br />
							<br />
							<div id="ac"> 1.与淘宝业务或卖家品牌冲突的昵称，淘宝将有可能收回；<br />
								2.首次填写可不填写保存，昵称设置成功后无法不填写保存。
							</div>
							<br />
							<br />
							<samp id="a4">性别</samp>
							<div id="a5" class="layui-form">
								<input type="radio" name="AAA" value="1" title="男">
								<input type="radio" name="AAA" value="2" title="女" checked>
								<input type="radio" name="AAA" value="3" title="保密">
							</div>
							<button type="button" class="layui-btn">保存</button>
						</div>
						<div id="wdtb1"><img src="./image/foreground/我的淘宝.png"></div>
						<div id="ip11"><input type="text"/></div>
						<div id="ip21"><a href="welcome.html"><input type="button" value="搜索"></a></div>
						<script>
							layui.use(function(){
								var element = layui.element;

								// hash 地址定位
								var hashName = 'tabid'; // hash 名称
								var layid = location.hash.replace(new RegExp('^#'+ hashName + '='), ''); // 获取 lay-id 值

								// 初始切换
								element.tabChange('test-hash', layid);
								// 切换事件
								element.on('tab(test-hash)', function(obj){
									location.hash = hashName +'='+ this.getAttribute('lay-id');
								});
							});
						</script>

						<script>
							$(function(){
								$.ajax({
									url: '../picture/getPictureList',
									method: 'get',
									success: function (result){
										//渲染页面
										$.each(result, function(index, obj){
											$('#tail2').append(
													`<div class="liebiao">` +
														`<ul>` +
															`<li><a href="worry.html"></li>` +
															`<li><img src="image/picture/${obj.pictureUrl}" class="niuyouguo"></a></li>` +
															`<li id="li1"><p id="p1"><b id="b1">${obj.pictureBrandId.brandName}</b>${obj.pictureName}</p></li>` +
															`<li id="a1">${obj.pictureActivity}</li>` +
															`<li><a style="color: red; font-weight: 700;">${obj.picturePrice}</a> <a>${obj.pictureNumber}</a></li>` +
														`</ul>` +
													`</div>`
											);
										})
									}
								});
							})
						</script>


						<!-- 内容二 -->
						<div class="layui-tab-item">
							<button type="button" class="layui-add" id="ID-upload-demo-btn">
								<i class="layui-icon layui-icon-upload"></i> 上传图片
							</button>
							<h6>支持jpg、jpeg、png 格式的图片<br />
								<b>请不要上传公司、店铺、商品的图片，淘宝保留对账户进行全淘宝处罚的权力</b></h6>
							<div style="width: 132px;">
								<div class="layui-upload-list">
									<img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
									<div id="ID-upload-demo-text"></div>
								</div>
								<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
									<div class="layui-progress-bar" lay-percent=""></div>
								</div>
							</div>

							<div id="wdtb2"><img src="./image/foreground/我的淘宝.png"></div>
							<div id="ip12"><input type="text"/></div>
							<div id="ip22"><a href="welcome.html"><input type="button" value="搜索"></a></div>

							<script>
								layui.use(function(){
									var upload = layui.upload;
									var layer = layui.layer;
									var element = layui.element;
									var $ = layui.$;
									// 单图片上传
									var uploadInst = upload.render({
										elem: '#ID-upload-demo-btn',
										url: '', // 实际使用时改成您自己的上传接口即可。
										before: function(obj){
											// 预读本地文件示例，不支持ie8
											obj.preview(function(index, file, result){
												$('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
											});

											element.progress('filter-demo', '0%'); // 进度条复位
											layer.msg('上传中', {icon: 16, time: 0});
										},
										done: function(res){
											// 若上传失败
											if(res.code > 0){
												return layer.msg('上传失败');
											}
											// 上传成功的一些操作
											// …
											$('#ID-upload-demo-text').html(''); // 置空上传失败的状态
										},
										error: function(){
											// 演示失败状态，并实现重传
											var demoText = $('#ID-upload-demo-text');
											demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
											demoText.find('.demo-reload').on('click', function(){
												uploadInst.upload();
											});
										},
										// 进度条
										progress: function(n, elem, e){
											element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
											if(n == 100){
												layer.msg('上传完毕', {icon: 1});
											}
										}
									});
									// 多图片上传
									upload.render({
										elem: '#ID-upload-demo-btn-2',
										url: '', // 实际使用时改成您自己的上传接口即可。
										multiple: true,
										before: function(obj){
											// 预读本地文件示例，不支持ie8
											obj.preview(function(index, file, result){
												$('#upload-demo-preview').append('<img src="'+ result +'" alt="'+ file.name +'" style="width: 90px; height: 90px;">')
											});
										},
										done: function(res){
											// 上传完毕
											// …
										}
									});
								});
							</script>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

</body>
</html>